<script setup lang="ts" name="withdrawalApplication">
import {ref, onMounted, reactive} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
import { useFinanceApi } from "/src/api/finance";
import { useUsersApi } from "/src/api/users";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";
import OaModal from "/@/components/common/oa-modal.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: ref(0),
		secondName: ref(''),
		thirdName: ref('申请提现')
	},
	userInfo: {},
	ruleForm: {
		amount: '',
		change_type: 'alipay_type',
		remark: '',
		withdraw_money: 0.00,
	},
	tips: {
		amount: '',
		remark: ''
	},
	tips2: {
		status: ref(false),
		type: 'waiting',
		content: '',
		time: '',
		confirm: '',
	},
	platformData: [
		{name: '提现', path: '/finance'},
		{name: '提现记录', path: '/finance/record'},
		{name: '收益明细', path: '/finance/income'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 提现方式点击
const statusClick = (value) => {
	lxsAppData.ruleForm.change_type = value
}

// input输入
const handleInput = (event) => {
	let value = event.target.value;
	// 使用正则表达式限制只能输入数字和小数点
	lxsAppData.ruleForm.amount = event.target.value.replace(/[^\d.]/g, '')
		// 保留两位小数（如果已经输入了两位小数则不再增加）
		.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/, '$1')
		// 保证第一位是数字且小数点后有两位数字
		.replace(/^(\d*\.\d{2}).*$/, '$1');

	// 因为我们在handleInput中修改了input的值，需要手动更新DOM中的值
	event.target.value = lxsAppData.ruleForm.amount;
	// console.log('input', value, lxsAppData.userInfo.amount)
	if (value > parseFloat(lxsAppData.userInfo.amount)) {
		lxsAppData.tips.amount = '提现金额不能大于可提现余额';
		return
	}
	lxsAppData.tips.amount = '';
	lxsAppData.ruleForm.withdraw_money = Number(lxsAppData.ruleForm.amount - lxsAppData.userInfo.withdraw_commission * value)
}

// 全部提现点击
const allTixian = () => {
	lxsAppData.tips.amount = '';
	lxsAppData.ruleForm.amount = lxsAppData.userInfo.amount;
	lxsAppData.ruleForm.withdraw_money = Number(lxsAppData.ruleForm.amount - lxsAppData.userInfo.withdraw_commission * lxsAppData.ruleForm.amount)
}

// textarea输入
const handleTextarea = (event) => {
	let value = event.target.value;
	if (value.length > 50) {
		lxsAppData.tips.remark = '备注不能超过50个字';
		return
	}
	lxsAppData.ruleForm.remark = event.target.value;
	lxsAppData.tips.remark = '';
}

// 提交
const onSubmit = async () => {
	if (lxsAppData.tips.amount != '' || lxsAppData.tips.remark != '') {
		ElMessage.error('请完善信息');
		return;
	}
	if (lxsAppData.ruleForm.amount < 100) {
		lxsAppData.tips.amount = '提现金额不能小于100元';
		return;
	}
	lxsAppData.ruleForm.commission = lxsAppData.userInfo.withdraw_commission;
	const res = await useFinanceApi().withdrawApplySubmit(lxsAppData.ruleForm);
	if (res.code == 200) {
		lxsAppData.tips2.status = true;
		lxsAppData.tips2.content = res.message;
		lxsAppData.tips2.time = res.data.dateTime;
		lxsAppData.tips2.confirm = '完成';
	}
}

// 完后点击
const onTipsConfirm = () => {
	lxsAppData.tips2.status = false;
	router.push('/finance').then(() => {
		refreshPage();
	});
}

// 获取页面数据
const getPageData = async () => {
	const res = await useUsersApi().getUserDetailInfo({type: 'withdraw'});
	console.log('获取提现页面数据', res.data)
	lxsAppData.userInfo = res.data.user_info;
}

onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader second-url="/finance" :second-name="lxsAppData.tab.secondName" :third-name="lxsAppData.tab.thirdName" />

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto mt10">

					<div class="simple">
						<el-row :gutter="10" class="simple-item">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
								<label for=""><span>*</span>提现金额</label>
							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="simple-top-item">
								<div class="input-with-icon">
									<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%EF%BF%A5.png" alt="">
								</div>
								<input class="lxs-input" type="text" v-model="lxsAppData.ruleForm.amount" @input="handleInput" :placeholder="'可提现'+lxsAppData.userInfo.amount+'元'">
							</el-col>
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
								<text class="all-tixian" @click="allTixian">全部提现</text>
							</el-col>
						</el-row>

						<el-row :gutter="10" class="simple-item">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="simple-top-item-tips">
								<text>扣除手续费{{ lxsAppData.userInfo.withdraw_commission * 100 }}%</text>
								<text>实际到账：￥{{ lxsAppData.ruleForm.withdraw_money }}</text>
							</el-col>
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
						</el-row>

						<el-row :gutter="10" class="simple-item mb20">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
								<div class="simple-item-tips" v-if="lxsAppData.tips.amount != ''">
									<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E6%8F%90%E7%A4%BA.png" alt="">
									<text>{{ lxsAppData.tips.amount }}</text>
								</div>
							</el-col>
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
						</el-row>

						<el-row :gutter="10" class="mb30 simple-item">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
								<label for=""><span>*</span>提现至</label>
							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
								<div class="simple-change">
									<div class="simple-change-box" :class="lxsAppData.ruleForm.change_type == 'alipay_type' ? 'status-active' : ''" @click="statusClick('alipay_type')" v-if="lxsAppData.userInfo.user_alipay">
										<img :src="lxsAppData.userInfo.user_alipay.icon" alt="">
										<div class="simple-change-box-right">
											<text class="simple-change-box-right-title">支付宝（{{ lxsAppData.userInfo.user_alipay.payee_account }}）</text>
											<text class="simple-change-box-right-tips">个人 I {{ lxsAppData.userInfo.user_alipay.payee_name }}</text>
										</div>
									</div>
									<div class="simple-change-box" :class="lxsAppData.ruleForm.change_type == 'bank_type' ? 'status-active' : ''" @click="statusClick('bank_type')" v-if="lxsAppData.userInfo.user_bank">
										<img :src="lxsAppData.userInfo.user_bank.icon" alt="">
										<div class="simple-change-box-right">
											<text class="simple-change-box-right-title">{{ lxsAppData.userInfo.user_bank.bank_name }}（{{ lxsAppData.userInfo.user_bank.bank_number }}）</text>
											<text class="simple-change-box-right-tips">个人 I {{ lxsAppData.userInfo.user_bank.payee }}</text>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>

						<el-row :gutter="10" class="simple-item mb10">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
								<label for="">备注</label>
							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
								<div class="simple-change">
									<textarea v-model="lxsAppData.ruleForm.remark" @input="handleTextarea"></textarea>
								</div>
							</el-col>
						</el-row>

						<el-row :gutter="10" class="simple-item mb30">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
								<div class="simple-item-tips" v-if="lxsAppData.tips.remark != ''">
									<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E6%8F%90%E7%A4%BA.png" alt="">
									<text>{{ lxsAppData.tips.remark }}</text>
								</div>
							</el-col>
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
						</el-row>

						<el-row :gutter="10" class="mb30 simple-item">
							<el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">

							</el-col>
							<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
								<button class="simple-item-btn" @click="onSubmit">提交</button>
							</el-col>
						</el-row>
					</div>

				</el-card>

			</div>

		</div>

	</div>

	<OaModal
		:is-visible="lxsAppData.tips2.status"
		:type="lxsAppData.tips2.type"
		:title="lxsAppData.tips2.title"
		:content="lxsAppData.tips2.content"
		:time="lxsAppData.tips2.time"
		:confirm="lxsAppData.tips2.confirm"
		:close="lxsAppData.tips2.close"
		@confirm="onTipsConfirm"
	/>
</template>

<style scoped lang="scss">
.simple {
	max-width: 612px;
	margin: 40px auto 0;

	.simple-item {
		width: 100%;
		align-items: center;

		label {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 14px;
			color: #000000;
			text-align: right;

			span {
				color: #FF0000;
				margin-right: 2px;
			}
		}

		.simple-top-item {
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.lxs-input {
				width: 100%;
				height: 100%;
				border: none !important;
				box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
				padding: 0 10px;
			}
			.lxs-input:hover {
				box-shadow: 0 0 0 1px #ffb07d inset;
			}
			.lxs-input:focus {
				box-shadow: 0 0 0 1px #FF0000 inset;
			}
			.input-with-icon {
				width: 38px;
				height: 100%;
				background: #EEF1F5;
				border-radius: 3px 0px 0px 3px;
				text-align: center;
				line-height: 30px;

				img {
					width: 26px;
					height: 24px;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}

		.simple-top-item-tips {
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			color: #666666;
		}

		.all-tixian {
			color: #0767D8;
			font-size: 13px;
			cursor: pointer;
		}
		.all-tixian:hover {
			font-weight: bold;
			color: #0767D8;
		}

		.simple-change {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.simple-change-box {
				width: 48%;
				height: 63px;
				background: #FFFFFF;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #ECECEC;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 8px;
				cursor: pointer;

				img {
					width: 34px;
					height: 34px;
				}

				.simple-change-box-right {
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.simple-change-box-right-title {
						font-size: 13px;
						color: #000000;
					}
					.simple-change-box-right-tips {
						font-size: 12px;
						color: #666666;
					}
				}
			}
			.simple-change-box:hover {
				border: 1px solid #FC661C;
			}
			.status-active {
				border: 1px solid #FC661C;
				position: relative;
			}
			.status-active:after {
				content: url("https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/finance/Rectangle_163.png");
				width: 12px;
				height: 12px;
				position: absolute;
				bottom: 1px;
				right: 0;
			}

			textarea {
				width: 100%;
				height: 95px;
				border: none !important;
				box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
				padding: 8px 12px;
			}
			textarea:hover {
				box-shadow: 0 0 0 1px #ffb07d inset;
			}
			textarea:focus {
				box-shadow: 0 0 0 1px #FF0000 inset;
			}
		}

		.simple-item-btn {
			width: 100%;
			height: 38px;
			line-height: 38px;
			text-align: center;
			border: none !important;
			color: #FFFFFF;
			background: #FC661C;
			border-radius: 3px 3px 3px 3px;
			cursor: pointer;
		}
		.simple-item-btn:hover {
			transform: scale(1.1);
			transition: transform 0.3s ease-in-out;
		}
		.simple-item-btn:active {
			transform: scale(1);
			transition: transform 0.3s ease-in-out;
		}

		.simple-item-tips {
			display: flex;
			align-items: center;
			background: #FFEBE9;
			border-radius: 3px 3px 3px 3px;
			padding: 6px 12px;

			img {
				width: 16px;
				height: 16px;
			}
			text {
				font-size: 12px;
				color: #FF6C63;
				margin-left: 5px;
			}
		}
	}
}
</style>